<template>
  <a-modal v-model:visible="visible" @cancel="handleCancel" :on-before-ok="handleBeforeOk" unmountOnClose>
    <template #title>
      标签
    </template>
    <a-form ref="formRef" :model="form" auto-label-width class="w-full">
      <a-select v-model="form.tagNames" placeholder="请选择标签" allow-create multiple>
        <a-option v-for="item in tagList" :key="item.tagId" :label="item.title" :value="item.title" />
      </a-select>
    </a-form>
  </a-modal>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fileAddTag,fileTagList } from '@/apis/file'
import { Message } from '@arco-design/web-vue'

const visible = ref(false)

const tagList = ref([])

const form = ref({
  tagNames: [],
  fileId: ''

})

const handleCancel = () => {
  visible.value = false
}

const loadTagList = async () => {
  const res = await fileTagList()
  tagList.value = res.data
}

const open = (fileId: number, tags) => {
  visible.value = true
  loadTagList()
  form.value.fileId = fileId
  console.log("tags", tags)
  if (tags?.length > 0) {
    form.value.tagNames = tags
  } else {
    form.value.tagNames = []

  }

}

const handleBeforeOk = async () => {
  await fileAddTag(form.value)
  Message.success('添加成功')
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 1000)
  })
}
defineExpose({ open })

</script>